<template>
    <div class="main">
        <Header class="main_header"/>
        <div style="height: 63px;"></div>
        <div class="main_body">
            <div class="main_body_left">
                <a-image :src="activity.image" class="main_body_left_image"></a-image>
            </div>
            <div class="main_body_right">
                <h1 class="main_body_right_name">{{ activity.name }}</h1>
                <h2>商品价格：{{ activity.price / 100 }}元</h2>
                <p class="main_body_right_introduction">{{ activity.introduction }}</p>
                <div v-for="(item,index) in voucherList" :key="item.id">
                    <div class="main_body_right_for_secKill"
                         :class="item.type===0?'main_body_right_for_ordinary':'main_body_right_for_secKill'">
                        <div class="main_body_right_for_one">
                            <div class="main_body_right_for_one_payAmount">满{{ item.payAmount }}</div>
                            <div>减{{ item.deductionAmount }}</div>
                            <div class="main_body_right_for_one_stock">剩余:{{ item.stock }}</div>
                        </div>
                        <div class="main_body_right_for_two">
                            <div class="main_body_right_for_two_endTime">结束时间:{{ item.endTime }}</div>
                            <a-button v-if="item.stock>0" @click="handleVoucherSecKill(item.id,index)"
                                      class="main_body_right_for_two_button_true">抢购
                            </a-button>
                            <a-button v-else class="main_body_right_for_two_button_false">已抢完
                            </a-button>
                        </div>
                    </div>
                </div>
                <div class="main_body_right_button">
                    <a-button @click="handlePay" :disabled="payDisabled" class="main_body_right_button_1"
                              type="primary">支付(支付宝)
                    </a-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import Header from '@/components/header/index.vue'
import {useRouter} from "vue-router";
import {getActivityAndVoucher, tradePagePay, voucherSecKill} from "@/api/home/activity";
import {ref} from "vue";
import {Activity, Voucher} from "@/model/home/activity";
// @ts-ignore
import cookie from 'js-cookie'
import {message} from "ant-design-vue";
import 'ant-design-vue/es/message/style/css'

const router = useRouter()

//活动id
const activityId = Number(router.currentRoute.value.params.id)

//用户id
const userId = ref<number>(0)

//是否禁用支付按钮
const payDisabled = ref<boolean>(false)

//统一收单下单并支付页面接口的调用
const handlePay = () => {
    if (cookie.get("userinfo") == null) {
        message.warning('未登录，无法支付');
    } else if (userId.value === 0) {
        message.warning('网络异常，请稍后重试！');
    } else {
        tradePagePay(activityId, userId.value).then((res) => {
            //将支付宝返回的表单字符串写在浏览器中，表单会自动触发submit提交
            document.write(res.data.message)
        })
    }
}

//活动信息
const activity = ref<Activity>({
    id: 0,
    name: '',
    introduction: '',
    price: 0,
    publisher: '',
    image: '',
    startTime: new Date(),
    endTime: new Date(),
    status: 0
})

//优惠券列表
const voucherList = ref<Voucher[]>([])

//优惠券秒杀
const handleVoucherSecKill = async (id: number, index: number) => {
    if (cookie.get("userinfo") == null) {
        message.warning('未登录，无法抢购');
    } else if (userId.value === 0) {
        message.warning('网络异常，请稍后重试！');
    } else {
        const res = await voucherSecKill(id, userId.value)
        if (res.data.code == 200) {
            message.success("抢购成功,订单号为:" + res.data.message);
            voucherList.value[index].stock = voucherList.value[index].stock - 1
        } else {
            message.warning(res.data.message);
        }
    }
}

//根据活动id查询活动和优惠券
const handleActivityAndVoucher = () => {
    getActivityAndVoucher(activityId).then((res) => {
        activity.value = res.data.data.map.activity
        voucherList.value = res.data.data.map.voucherList
    })
}

//获取用户id
const getUserId = () => {
    if (cookie.get('userinfo') != null) {
        userId.value = JSON.parse(cookie.get('userinfo')).id
    } else {
        userId.value = 0
    }
}

getUserId()
handleActivityAndVoucher()
</script>

<style lang="less" scoped>
.main {
  height: 100%;
  width: 100%;

  .main_header {
    height: 70px;
    position: fixed;
    width: 100%;
    z-index: 99999;
  }

  .main_body {
    display: flex;
    justify-content: center;
    height: calc(100vh - 140px);

    .main_body_left {
      margin-top: 30px;

      :deep(.main_body_left_image) {
        width: 700px;
        height: 700px;
        background-color: #ffffff;
      }
    }

    .main_body_right {
      overflow-y: scroll;
      margin-left: 10px;
      margin-top: 30px;
      width: 400px;
      max-height: 700px;
      //overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      background-color: #ffffff;
      padding: 0 5px;

      .main_body_right_name {
        font-size: 50px;
        padding: 10px;
      }

      .main_body_right_introduction {
        font-size: 18px;
      }

      .main_body_right_for_secKill {
        background-image: linear-gradient(to right, #ff758c 0%, #ff7eb3 100%);
        width: 100%;
        height: 100px;
        margin-bottom: 10px;

        .main_body_right_for_one {
          display: flex;
          font-size: 30px;
          margin-top: 10px;
          margin-left: 10px;

          .main_body_right_for_one_stock {
            margin-left: auto;
            margin-right: 10px;
          }
        }

        .main_body_right_for_two {
          display: flex;
          margin-top: 15px;
          margin-left: 10px;

          .main_body_right_for_two_endTime {
            margin-top: 5px;
            font-size: 15px;
          }

          .main_body_right_for_two_button_true {
            margin-left: auto;
            margin-right: 10px;
            margin-bottom: 5px;
            background-color: aqua;
          }

          .main_body_right_for_two_button_false {
            margin-left: auto;
            margin-right: 10px;
            margin-bottom: 5px;
            background-color: darkgrey;
          }
        }
      }

      .main_body_right_for_ordinary {
        background-image: linear-gradient(to top, #b3ffab 0%, #12fff7 100%);
        width: 100%;
        height: 100px;
        margin-bottom: 10px;

        .main_body_right_for_one {
          display: flex;
          font-size: 30px;
          margin-top: 10px;
          margin-left: 10px;

          .main_body_right_for_one_stock {
            margin-left: auto;
            margin-right: 10px;
          }
        }

        .main_body_right_for_two {
          display: flex;
          margin-top: 15px;
          margin-left: 10px;

          .main_body_right_for_two_endTime {
            margin-top: 5px;
            font-size: 15px;
          }

          .main_body_right_for_two_button_true {
            margin-left: auto;
            margin-right: 10px;
            margin-bottom: 5px;
            background-color: aqua;
          }

          .main_body_right_for_two_button_false {
            margin-left: auto;
            margin-right: 10px;
            margin-bottom: 5px;
            background-color: darkgrey;
          }
        }
      }

      .main_body_right_button {
        display: flex;
        margin-top: 20px;
        margin-bottom: 20px;

        .main_body_right_button_1 {
          font-size: 20px;
          height: 50px;
          margin-left: auto;
        }
      }
    }
  }
}
</style>